<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 定义一个垂直方向的flex布局 */
    .colum{
      display: flex;
      flex-direction: column ;
      justify-content: center;
    }
    /* 定义一个水平方向的flex布局 */
    .row{
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    /* 定义一个带有间距的粉红色背景的盒子 */
    .box{
      background-color: pink;
      margin: 10px;
    }
    /* 定义一个红色边框的容器，用于flex布局，宽度和高度均为500px，项目居中对齐，允许换行 */
    .father{
      border: 1px solid red;
      width: 500px;
      height: 500px;
      align-self: center;
      flex-wrap: wrap;  /* 换行 */
    }
    /* 定义一个可以扩展以填充父容器空间的布局 */
    .layout{
      flex: 1;
    }
  </style>
</head>
<body>
  <!-- 使用水平布局的父容器，包含多个子元素 -->
  <div class="colum father" >
    <p class="box">段落1</p>
    <p class="box">段落2</p>
    <p class="box">段落2</p>
    <p class="box">段落2</p>
    <p class="box">段落2</p>
    <p class="box">段落2</p>
    <p class="box">段落2</p>
    <p class="box">段落2</p>
    <p class="box">段落2</p>
    <p class="box">段落2</p>
    <p class="box">段落2</p>
    <p class="box">段落2</p>
    <p class="box">段落2</p>
    <p class="box">段落2</p>
    <p class="box">段落2</p>
    <p class="box layout">段落2</p>
    <p class="box layout">段落2</p>
    <p class="box layout">段落2</p>
  </div>
</body>
</html>